<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>kuan</title>
    <style>
      html{
        font-size: 10px;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script>
      (() => {
        //声明：var let const function
        function setRem() {
          console.log('setRem......')
          //设计稿宽度
          const designWidth = 375;
          //视口宽度
          const htmlClientWidth = document.documentElement.clientWidth;
          //设置比率
          const remSize = htmlClientWidth / 375 * 10;
  
          if (htmlClientWidth > 640) {
            document.documentElement.style.fontSize = '10px';
          } else {
            //设置 html的fontSize
            document.documentElement.style.fontSize = parseInt(remSize) + 'px';
          }
        }
  
        setRem(); //函数执行设置
        let timer;
        window.addEventListener('resize', () => {
          //改变大小时，直接先清除计时器
          clearTimeout(timer);
          timer = setTimeout(function () {
            console.log('窗口大小改变！！！', document.documentElement.clientWidth);
            setRem();  //窗口改变时执行
          }, 1000)
  
        })
  
        // //可以使用动态创建style标签的方式添加样式
        // const styleEl = document.createElement('style');
        // styleEl.innerHTML = 'html{color:red}'
        // document.getElementsByTagName('head')[0].appendChild(styleEl);
  
      })();
    </script>
  </body>
</html>
